<script setup>
// ====== 导入依赖 ======
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

// ====== 路由相关 ======
const router = useRouter()

// ====== 状态管理 ======
const isEditing = ref(false)
const orderMenuOpen = ref(false)
const accountMenuOpen = ref(false)
const activeMenu = ref('home')

// ====== 用户信息数据 ======
const userInfo = ref({
  avatar: new URL('@/assets/images/user-icon.png', import.meta.url).href,
  nickname: '闪亮的西瓜',
  userid: '123456789',
  gender: '男',
  old_years: '22',
  location: '广东省 广州市 天河区',
  school: '广东科技学院',
  introduction: '这个人很懒什么也没有留下',
})

const tempUserInfo = ref({ ...userInfo.value })

// ====== 省市区数据 ======
const provinceList = [
  {
    name: '北京市',
    cities: [{ name: '北京市', districts: ['东城区', '西城区', '朝阳区', '海淀区'] }],
  },
  {
    name: '广东省',
    cities: [
      { name: '广州市', districts: ['天河区', '越秀区', '海珠区'] },
      { name: '深圳市', districts: ['南山区', '福田区', '罗湖区'] },
    ],
  },
  { name: '上海市', cities: [{ name: '上海市', districts: ['黄浦区', '徐汇区', '浦东新区'] }] },
  {
    name: '浙江省',
    cities: [
      { name: '杭州市', districts: ['西湖区', '上城区', '滨江区'] },
      { name: '宁波市', districts: ['海曙区', '江北区', '鄞州区'] },
    ],
  },
]

const selectedProvince = ref('广东省')
const selectedCity = ref('广州市')
const selectedDistrict = ref('天河区')

// ====== 监听省市区变化 ======
watch(selectedProvince, (val) => {
  const province = provinceList.find((p) => p.name === val)
  if (province) {
    selectedCity.value = province.cities[0].name
    selectedDistrict.value = province.cities[0].districts[0]
  }
})

watch(selectedCity, (val) => {
  const province = provinceList.find((p) => p.name === selectedProvince.value)
  if (province) {
    const city = province.cities.find((c) => c.name === val)
    if (city) {
      selectedDistrict.value = city.districts[0]
    }
  }
})

// ====== 简介字数限制 ======
const introMaxLen = 20
function handleIntroInput(e) {
  if (e.target.value.length > introMaxLen) {
    e.target.value = e.target.value.slice(0, introMaxLen)
    tempUserInfo.value.introduction = e.target.value
  }
}

// ====== 左侧菜单配置 ======
const menuList = [
  { name: '我的主页', key: 'home', icon: '🏠' },
  { name: '我的通知', key: 'notice', icon: '🔔' },
  { name: '我的收藏', key: 'favorite', icon: '⭐' },
  {
    name: '我的订单',
    icon: '📦',
    key: 'order',
    children: [
      { name: '历史订单', key: 'order-history' },
      { name: '待付款', key: 'order-unpaid' },
      { name: '待收货', key: 'order-undelivered' },
      { name: '退款/售后', key: 'order-refund' },
    ],
  },
  { name: '我的会员', key: 'vip', icon: '💎' },
  {
    name: '账户设置',
    icon: '⚙️',
    key: 'account',
    children: [
      { name: '账号与安全', key: 'security', icon: '🔒' },
      { name: '切换账号', key: 'switch', icon: '🔄' },
      { name: '退出账号', key: 'logout', icon: '🚪' },
      { name: '注销账号', key: 'delete', icon: '❌' },
    ],
  },
]

// ====== 发布的图书笔记数据 ======
const publishedNotes = [
  {
    id: 1,
    cover: new URL('@/assets/images/book-1.png', import.meta.url).href,
    title: '算法导论',
    note: '本书讲解了算法的基本思想和实现，适合入门和进阶。',
    rate: 5,
  },
  {
    id: 2,
    cover: new URL('@/assets/images/book-2.png', import.meta.url).href,
    title: '操作系统原理',
    note: '深入理解操作系统的核心机制，理论与实践结合。',
    rate: 4,
  },
  {
    id: 3,
    cover: new URL('@/assets/images/book-3.png', import.meta.url).href,
    title: '计算机网络',
    note: '网络协议、架构与安全，内容详实，适合系统学习。',
    rate: 5,
  },
]

// ====== 订单数据 ======
const orderList = ref([
  {
    id: '20240601001',
    price: 88.8,
    time: '2024-06-01 10:23',
    img: new URL('@/assets/images/book-1.png', import.meta.url).href,
    status: '已发货',
  },
  {
    id: '20240601002',
    price: 45.5,
    time: '2024-06-02 14:12',
    img: new URL('@/assets/images/book-2.png', import.meta.url).href,
    status: '运输中',
  },
])

// ====== 事件处理函数 ======
function handleMenuClick(item, idx, parentType = null) {
  if (item.children) {
    if (item.key === 'order') {
      orderMenuOpen.value = !orderMenuOpen.value
    } else if (item.key === 'account') {
      accountMenuOpen.value = !accountMenuOpen.value
    }
    return
  }
  if (parentType === 'order') {
    activeMenu.value = item.key
    orderMenuOpen.value = true
  } else if (parentType === 'account') {
    activeMenu.value = item.key
    accountMenuOpen.value = true
  } else {
    activeMenu.value = item.key
    orderMenuOpen.value = false
    accountMenuOpen.value = false
  }
}

function handleAccountAction(key) {
  if (key === 'logout') {
    alert('已退出账号')
  } else if (key === 'delete') {
    alert('账号已注销')
  } else if (key === 'switch') {
    alert('切换账号功能待实现')
  }
}

function goToNoteDetail(id) {
  router.push(`/note/${id}`)
}

const editProfile = () => {
  isEditing.value = !isEditing.value
  if (!isEditing.value) {
    tempUserInfo.value.location = `${selectedProvince.value} ${selectedCity.value} ${selectedDistrict.value}`
    userInfo.value = { ...tempUserInfo.value }
  } else {
    const [p, c, d] = tempUserInfo.value.location.split(' ')
    selectedProvince.value = p || provinceList[0].name
    const province = provinceList.find((x) => x.name === selectedProvince.value)
    selectedCity.value = c || (province ? province.cities[0].name : '')
    const city = province ? province.cities.find((x) => x.name === selectedCity.value) : null
    selectedDistrict.value = d || (city ? city.districts[0] : '')
  }
}

const cancelEdit = () => {
  isEditing.value = false
  tempUserInfo.value = { ...userInfo.value }
}
</script>

<template>
  <div class="personal-center-page">
    <!-- ====== 页面导航 ====== -->
    <div class="personal-center-page-nav">
      <div class="personal-center-page-nav-wrapper">
        <h1 class="personal-center-page-nav-left">个人中心</h1>
        <h1 class="personal-center-page-nav-right">
          <router-link to="/">首页</router-link>
        </h1>
      </div>
      <div class="personal-center-page-nav-line"></div>
    </div>

    <!-- ====== 主内容区 ====== -->
    <div class="personal-center-page-main">
      <!-- 左侧菜单 -->

      <!-- 右侧内容区 -->
      <div class="personal-center-page-content">
        <!-- 个人信息卡片 -->
        <div v-if="activeMenu === 'home'" class="personal-center-page-info-card">
          <div class="personal-center-page-info-header">
            <h2>个人信息</h2>
            <button class="personal-center-page-edit-btn" @click="editProfile">
              {{ isEditing ? '保存' : '编辑个人信息' }}
            </button>
          </div>
          <transition name="personal-center-page-info-expand">
            <div
              v-show="true"
              class="personal-center-page-info-content personal-center-page-info-expand-anim"
              :class="{ expanded: isEditing }"
            >
              <img :src="userInfo.avatar" alt="用户头像" class="personal-center-page-avatar" />
              <div class="personal-center-page-info-details">
                <template v-if="!isEditing">
                  <div class="personal-center-page-info-row">
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">昵称：</span>
                      <span class="personal-center-page-info-value">{{ userInfo.nickname }}</span>
                    </div>
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">用户ID：</span>
                      <span class="personal-center-page-info-value">{{ userInfo.userid }}</span>
                    </div>
                  </div>
                  <div class="personal-center-page-info-row">
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">性别：</span>
                      <span class="personal-center-page-info-value">{{ userInfo.gender }}</span>
                    </div>
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">年龄：</span>
                      <span class="personal-center-page-info-value">{{ userInfo.old_years }}</span>
                    </div>
                  </div>
                  <div class="personal-center-page-info-row">
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">地区：</span>
                      <span class="personal-center-page-info-value">{{ userInfo.location }}</span>
                    </div>
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">学校：</span>
                      <span class="personal-center-page-info-value">{{ userInfo.school }}</span>
                    </div>
                  </div>
                  <div class="personal-center-page-info-row">
                    <div class="personal-center-page-info-item" style="width: 100%">
                      <span class="personal-center-page-info-label">简介：</span>
                      <span class="personal-center-page-info-value">{{
                        userInfo.introduction
                      }}</span>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="personal-center-page-info-row">
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">昵称：</span>
                      <input
                        v-model="tempUserInfo.nickname"
                        class="personal-center-page-info-input"
                      />
                    </div>
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">用户ID：</span>
                      <input
                        v-model="tempUserInfo.userid"
                        class="personal-center-page-info-input"
                      />
                    </div>
                  </div>
                  <div class="personal-center-page-info-row">
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">性别：</span>
                      <select v-model="tempUserInfo.gender" class="personal-center-page-info-input">
                        <option value="男">男</option>
                        <option value="女">女</option>
                      </select>
                    </div>
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">年龄：</span>
                      <input
                        v-model="tempUserInfo.old_years"
                        class="personal-center-page-info-input"
                      />
                    </div>
                  </div>
                  <div class="personal-center-page-info-row">
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">地区：</span>
                      <select
                        v-model="selectedProvince"
                        class="personal-center-page-info-input"
                        style="width: 33%"
                      >
                        <option v-for="p in provinceList" :key="p.name" :value="p.name">
                          {{ p.name }}
                        </option>
                      </select>
                      <select
                        v-model="selectedCity"
                        class="personal-center-page-info-input"
                        style="width: 33%"
                      >
                        <option
                          v-for="c in provinceList.find((p) => p.name === selectedProvince)
                            ?.cities || []"
                          :key="c.name"
                          :value="c.name"
                        >
                          {{ c.name }}
                        </option>
                      </select>
                      <select
                        v-model="selectedDistrict"
                        class="personal-center-page-info-input"
                        style="width: 33%"
                      >
                        <option
                          v-for="d in provinceList
                            .find((p) => p.name === selectedProvince)
                            ?.cities.find((c) => c.name === selectedCity)?.districts || []"
                          :key="d"
                          :value="d"
                        >
                          {{ d }}
                        </option>
                      </select>
                    </div>
                    <div class="personal-center-page-info-item">
                      <span class="personal-center-page-info-label">学校：</span>
                      <input
                        v-model="tempUserInfo.school"
                        class="personal-center-page-info-input"
                      />
                    </div>
                  </div>
                  <div class="personal-center-page-info-row">
                    <div class="personal-center-page-info-item" style="width: 100%">
                      <span class="personal-center-page-info-label">简介：</span>
                      <input
                        v-model="tempUserInfo.introduction"
                        class="personal-center-page-info-input"
                        :maxlength="introMaxLen"
                        @input="handleIntroInput"
                        placeholder="最多20字"
                      />
                      <span class="personal-center-page-intro-count"
                        >{{ tempUserInfo.introduction.length }}/20</span
                      >
                    </div>
                  </div>
                  <button class="personal-center-page-cancel-btn" @click="cancelEdit">取消</button>
                </template>
              </div>
            </div>
          </transition>
        </div>

        <!-- 历史订单卡片 -->
        <div v-else-if="activeMenu === 'order-history'" class="personal-center-page-info-card">
          <div class="personal-center-page-info-header">
            <h2>历史订单</h2>
          </div>
          <div class="personal-center-page-order-list">
            <div v-for="order in orderList" :key="order.id" class="personal-center-page-order-item">
              <img :src="order.img" class="personal-center-page-order-img" />
              <div class="personal-center-page-order-info">
                <div>订单号：{{ order.id }}</div>
                <div>
                  价格：<span class="personal-center-page-order-price">￥{{ order.price }}</span>
                </div>
                <div>下单时间：{{ order.time }}</div>
                <div>状态：{{ order.status }}</div>
              </div>
              <button class="personal-center-page-order-logistics-btn">查看物流</button>
            </div>
          </div>
        </div>

        <!-- 图书笔记卡片 -->
        <div class="personal-center-page-books-section">
          <h2>我发布的图书笔记</h2>
          <div class="personal-center-page-note-list">
            <div
              class="personal-center-page-note-card"
              v-for="note in publishedNotes"
              :key="note.id"
              @click="goToNoteDetail(note.id)"
            >
              <img :src="note.cover" class="personal-center-page-note-cover" />
              <div class="personal-center-page-note-title">{{ note.title }}</div>
              <div class="personal-center-page-note-brief">{{ note.note }}</div>
              <div class="personal-center-page-note-rate">
                <span
                  v-for="n in 5"
                  :key="n"
                  :class="['personal-center-page-star', { filled: n <= note.rate }]"
                  >★</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
/* ====== 页面基础样式 ====== */
.personal-center-page {
  width: 98vw;
  height: 100%;
  overflow-x: hidden;
  background: #f7f7f7;
}

/* ====== 页面导航样式 ====== */
.personal-center-page-nav {
  width: 100%;
  padding: 20px 0;

  .personal-center-page-nav-wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .personal-center-page-nav-left,
  .personal-center-page-nav-right {
    font-size: 24px;
    font-weight: 600;
    color: #222;
  }

  .personal-center-page-nav-right a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s;

    &:hover {
      color: #ff9800;
      background: #f7f7f7;
    }
  }

  .personal-center-page-nav-line {
    width: 80%;
    height: 1px;
    background: #e0e0e0;
    margin: 20px auto;
  }
}

/* ====== 主内容区样式 ====== */
.personal-center-page-main {
  width: 80%;
  margin: 0 auto;
  padding: 5px;
  display: flex;
  gap: 15px;
  box-sizing: border-box;
}

/* ====== 左侧菜单样式 ====== */
.personal-center-page-sidemenu {
  width: 250px;
  height: 1%;
  background: #fff;
  border-radius: 16px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.personal-center-page-menu-item {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  margin: 3px 20px;
  font-size: 17px;
  color: #222;
  cursor: pointer;
  border-radius: 15px;
  font-weight: 550;
  transition: all 0.2s;

  &:hover,
  &.active {
    background: #fffae6;
    color: #ff9800;
  }
}

.personal-center-page-menu-icon {
  margin-right: 12px;
  font-size: 18px;
}

.personal-center-page-menu-text {
  font-weight: 550;
  font-family: 'Courier New', Courier, monospace;
}

.personal-center-page-menu-item-parent {
  justify-content: space-between;
}

.personal-center-page-menu-arrow {
  margin-left: auto;
  font-size: 14px;
  transition: transform 0.2s;
  transform: rotate(180deg);

  &.open {
    transform: rotate(0deg);
  }
}

.personal-center-page-submenu-list {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
}

.personal-center-page-submenu-item {
  font-size: 14px;
  padding: 8px 20px;
  margin: 3px 20px;
  border-radius: 15px;
}

/* ====== 右侧内容区样式 ====== */
.personal-center-page-content {
  flex: 1;
  min-width: 0;
}

/* ====== 个人信息卡片样式 ====== */
.personal-center-page-info-card {
  background: #fff;
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.personal-center-page-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  h2 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
  }
}

.personal-center-page-edit-btn {
  width: 120px;
  padding: 8px 16px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
  transition: background 0.2s;

  &:hover {
    background: #f57c00;
  }
}

.personal-center-page-info-content {
  display: flex;
  gap: 32px;
}

.personal-center-page-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.personal-center-page-info-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.personal-center-page-info-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;

  .personal-center-page-info-item {
    flex: 1;
    min-width: 0;
  }
}

.personal-center-page-info-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.personal-center-page-info-label {
  width: 80px;
  font-size: 16px;
  font-weight: 550;
  color: #666;
}

.personal-center-page-info-value {
  font-size: 16px;
  font-weight: 550;
  color: #222;
}

.personal-center-page-info-input {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  color: #222;
  outline: none;
  transition: border-color 0.2s;

  &:focus {
    border-color: #ff9800;
  }
}

.personal-center-page-cancel-btn {
  width: 20%;
  margin-top: 16px;
  padding: 10px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
  transition: all 0.2s;

  &:hover {
    background: #ff9800;
    color: #222;
  }
}

.personal-center-page-intro-count {
  font-size: 12px;
  color: #aaa;
  margin-left: 8px;
}

/* ====== 订单列表样式 ====== */
.personal-center-page-order-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 10px;
}

.personal-center-page-order-item {
  display: flex;
  align-items: center;
  background: #fafafa;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.personal-center-page-order-img {
  width: 80px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 24px;
}

.personal-center-page-order-info {
  flex: 1;
  font-size: 15px;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.personal-center-page-order-price {
  color: #ff9800;
  font-weight: 600;
}

.personal-center-page-order-logistics-btn {
  padding: 8px 18px;
  background: #ff9800;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;

  &:hover {
    background: #f57c00;
  }
}

/* ====== 图书笔记样式 ====== */
.personal-center-page-books-section {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  h2 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 24px;
  }
}

.personal-center-page-note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.personal-center-page-note-card {
  width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  cursor: pointer;
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-4px);
  }
}

.personal-center-page-note-cover {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.personal-center-page-note-title {
  font-weight: 600;
  margin: 12px 0 6px 0;
}

.personal-center-page-note-brief {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.personal-center-page-note-rate {
  .personal-center-page-star {
    color: #e0e0e0;
    font-size: 18px;

    &.filled {
      color: #ff9800;
    }
  }
}

/* ====== 动画效果 ====== */
.personal-center-page-submenu-fade-enter-active,
.personal-center-page-submenu-fade-leave-active {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.personal-center-page-submenu-fade-enter-from,
.personal-center-page-submenu-fade-leave-to {
  opacity: 0;
  max-height: 0;
}

.personal-center-page-submenu-fade-enter-to,
.personal-center-page-submenu-fade-leave-from {
  opacity: 1;
  max-height: 300px;
}

.personal-center-page-info-expand-enter-active,
.personal-center-page-info-expand-leave-active {
  transition: max-height 0.4s cubic-bezier(1, 0, 0.2, 1);
}

.personal-center-page-info-expand-anim {
  overflow: hidden;
  max-height: 180px;
  transition: max-height 0.4s cubic-bezier(1, 0, 0.2, 1);

  &.expanded {
    max-height: 500px;
  }
}
</style>
